<template>
    <el-container>
      <el-header>
        <h1>添加用户</h1>
      </el-header>
      <el-main>
        <el-form :model="user" label-width="100px">
          <el-form-item label="用户名">
            <el-input v-model="user.username" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" type="password" />
          </el-form-item>
          <el-form-item label="角色ID">
            <el-input v-model="user.roleId" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        user: {
          username: '',
          password: '',
          roleId: 1,
        },
      };
    },
    methods: {
      async submit() {
        await this.$api.createUser(this.user);
        this.$router.push('/users');
      },
      cancel() {
        this.$router.push('/users');
      },
    },
  };
  </script>